<template>
    <div v-show="isShow" class="layer-list">
        <div style="text-align: left; font-weight: 700; font-size: 22px;">
            <span style="width: 50%; margin-right: 190px;">图层列表</span>
            <el-button v-text="(tooltipDisabled ? '显示' : '关闭') + '提示框'" @click="tooltipDisabled = !tooltipDisabled"></el-button>
        </div>
        <!--:props="defaultProps" @node-click="handleNodeClick" -->
        <el-tree :data="getLayerNameList()" show-checkbox node-key="id" style="width: 350px; padding: 10px 36px 10px 5px;"
                 @check="handleCheckChange"
                 :default-checked-keys="defaultCheckedKeys()">
            <!--自定义内容-->
            <template #default="{ node, data }">
                <el-tooltip :disabled="tooltipDisabled" class="item" effect="dark" :content="data.descript || node.label" placement="top-start" style="max-width: 300px;">
                    <span class="custom-tree-node">
                        <span v-text="node.label" @click="handleNodeLabelClick(data)"></span>
                        <span v-if="!data.children" class="remove-node">
                            <a class="el-icon-circle-close" @click="handleRemoveNode(node, data)"></a>
                        </span>
                    </span>
                </el-tooltip>
            </template>
        </el-tree>
    </div>
</template>

<script>
import store from "@/store/store";

export default {
  name: "LayerList",
  data(){
    return {
      // 共享数据存储索引
      sharedState: store.state,
      tooltipDisabled: true // 是否显示提示
      // defaultCheckedKeys:[] // tree默认选中的项
      // layerNameList: [] // 图层列表
    };
  },
  computed: {
    // 图层列表名称树
    layerNameList(){
      return this.getLayerNameList();
    },
    isShow(){
      // 直接调用会有缓存导致不更新
      return this.contentShow();
    }
  },
  mounted(){
    // 监听图层列表中数据的变化。
    // 暂时找不到sharedState中共享数据监听的方法，无奈只能使用这种方式。
    // this.init();
  },
  methods: {
    /**
     * 初始化
     */
    init(){
      const intervalName = setInterval(() => {
        this.layerNameList = this.sharedState.layerNameList;
        console.log("this.layerNameList", this.layerNameList);
      }, 1000);

      setTimeout(() => {
        clearInterval(intervalName);
      }, 1000);
    },

    /**
     * tree默认选中的项
     **/
    defaultCheckedKeys(){
      return this.sharedState.treeDefaultCheckedKeys;
    },

    /**
     * 计算属性有缓存，无法直接使用，需要借助方法。
     **/
    contentShow(){
      return this.sharedState.contentShowList[0];
    },

    getLayerNameList(){
      return this.sharedState.layerNameList;
    },

    /**/
    handleNodeLabelClick(data){

      let layerKey;
      // 中间节点
      if (data.children) {
        console.log("中间节点", data.children);
        if (data.children.length === 1) {
          layerKey = data.children[0].layerKey;
        }
      } else if (data.layerKey) {
        console.log("叶子节点", data.layerKey);
        layerKey = data.layerKey;
      }

      let layerModel = this.sharedState.viewerLayers[layerKey];
      console.log(`layerModel`, layerModel);
      if (layerModel) {
        layerModel.flyTo();
      }
    },

    /**
     * 节点(节点名称)被点击事件：定位
     * 三个参数
     */
    handleNodeClick(nodeProxy){
      console.log("nodeProxy", nodeProxy);

      // 中间节点
      if (nodeProxy.children) {
        console.log("中间节点", nodeProxy.children);
      }

      if (nodeProxy.layerKey) {
        console.log("叶子节点", nodeProxy.layerKey);
        let layerModel = this.sharedState.viewerLayers[nodeProxy.layerKey];
        layerModel.flyTo();
        console.log(`layerModel`, layerModel);
      }

    },

    /**
     * 节点复选框选择事件
     *
     * currentNode：当前的节点信息
     * treeStatus：节点状态关联
     * */
    handleCheckChange(currentNode, treeStatus){
      console.log("currentNode", currentNode);
      console.log("treeStatus", treeStatus);

      // 用于：父子节点严格互不关联时，父节点勾选变化时通知子节点同步变化，实现单向关联。
      let selected = treeStatus.checkedKeys.indexOf(currentNode.id); // -1未选中
      // 选中
      let isShow = selected !== -1;

      // 叶子节点
      if (currentNode.layerKey) {
        this.setNodeLayerVisible(currentNode, isShow);
      }
      // 中间节点
      if (currentNode.children) {
        this.setChildrenNodeShow(currentNode.children, isShow);
      }
    },

    /**
     * 设置图层关联节点的可见性
     * */
    setNodeLayerVisible(currentNode, isShow){
      if (currentNode.layerKey) {
        console.log("叶子节点", currentNode.layerKey);
        let layerModel = this.sharedState.viewerLayers[currentNode.layerKey];
        console.log(`layerModel`, layerModel);
        if (layerModel) {
          layerModel.setVisible(isShow);
        }
      }
    },

    /**
     * 设置子图层的可见性
     * */
    setChildrenNodeShow(nodes, isShow){
      for (const node of nodes) {

        if (node.children) {
          this.setChildrenNodeShow(isShow);
        } else {
          this.setNodeLayerVisible(node, isShow);
        }
      }
    },

    /**
     * 删除子节点
     */
    handleRemoveNode(node, data){

      console.log(`删除元素：node`, node);

      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex(item => item.id === data.id);
      children.splice(index, 1);
      if (children && children.length === 0) {
        this.removeParent(parent);
      }

      // this.data = [...this.data];
    },

    /**
     * 删除当前节点和当前节点的空父节点。如果父节点只有一个子节点时，删除父节点
     */
    removeParent(currentNode){
      console.log(`currentNode`, currentNode);
      // 获取当前节点的子节点
      const currentChildren = currentNode.data.children;
      // 当前的中间节点没有子节点就删除当前节点
      if (currentChildren && currentChildren.length === 0) {

        // 获取当前节点的父节点，在父节点中删除当前节点
        const parent = currentNode.parent;
        const parentChildren = parent.data.children || parent.data;
        const index = parentChildren.findIndex(item => item.id === currentNode.data.id);
        parentChildren.splice(index, 1);
        this.removeParent(parent);
      }

    }
  }
};
</script>

<style lang="less">
    @default-background: #fff;
    @default-font-size: 20px;

    @tree-node-height: 34px;

    .layer-list {
        position: absolute;
        z-index: 1;
        top: 100px;
        left: 20px;
        margin-top: 20px;
        border-radius: 5px;
        background: @default-background;
        padding: 10px;

        h3 {
            text-align: left;
            padding-left: 18px;
        }
    }

    .el-tree {
        background: @default-background;
    }

    /***修改列表样式*****************************************************************/

    /*展开图标*/
    .el-tree-node__expand-icon {
        height: @tree-node-height;
        line-height: @tree-node-height;
        font-size: @tree-node-height !important;
    }

    /*勾选框*/
    .el-checkbox__inner {
        width: 20px;
        height: 20px;
        /*勾选后未居中*/
        /*text-align: center;*/
    }

    .el-tree-node__content {
        height: @tree-node-height;
        line-height: @tree-node-height;
    }

    /***内部内容*****************/
    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 8px;
        font-size: @default-font-size;
        line-height: @tree-node-height;
        height: @tree-node-height;

        span:first-of-type {
            /*width: 280px;*/
            overflow: hidden;
            text-align: left;
        }

        .remove-node {
            position: absolute;
            right: 6px;
            width: @default-font-size;
            /*visibility: hidden;*/
            padding-left: 20px;
        }

        /*.remove-node:hover {
            visibility: inline; //inherit
        }*/
    }

    /*提示*/
    .el-popper.is-dark {
        max-width: 500px;
    }
</style>
